import ArticleItem from '@/components/ArticleItem'
import styles from './index.module.scss'

// 测试
import React, { useRef, useState } from 'react'
import { InfiniteScroll, List } from 'antd-mobile'

import { sleep } from 'antd-mobile/es/utils/sleep'
import { getAriticleApi } from '@/api/home'
import { ArticlesItem } from '@/types/data'
import { useNavigate } from 'react-router-dom'
let count = 0

// mock假数据
export async function mockRequest() {
  if (count >= 5) {
    return []
  }
  await sleep(2000)
  count++
  return [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
  ]
}

type Props = {
  channelID: number
}
const ArticleList = ({ channelID }: Props) => {
  // 1. 定义列表数据变量
  const [data, setData] = useState<ArticlesItem[]>([])

  // 2. 控制列表加载状态：true 还有数据 | false 没有数据
  const [hasMore, setHasMore] = useState(true)
  // 新闻时间戳
  const timestamp = useRef(Date.now())
  /**
   * 3. 加载数据的方法：
   *    1. 组件默认挂载会执行一次，加载一屏数据，如果不够一屏，会再次执行
   *    2. 列表滚动到底部，会再次执行
   */
  async function loadMore() {
    // 1. 发送请求，获取列表数据
    const { data } = await getAriticleApi({
      channel_id: channelID,
      timestamp: timestamp.current,
    })
    // console.log('data', data)

    // 2. 向列表中追加数据
    setData((list) => [...list, ...data.results])
    // 3. 判断是否还有数据：
    // 有=》hasMore设置为true，可以继续滚动加载数据 |  没有=》 hasMore设置为false，不能继续滚动加载数据
    if (data.pre_timestamp) {
      // 存储下一次请求的时间戳
      timestamp.current = data.pre_timestamp
    } else {
      setHasMore(false)
    }
  }

  const nav = useNavigate()

  return (
    // <div className={styles.root}>
    //   <List>
    //     {data.map((item, index) => (
    //       <List.Item key={index}>{item}</List.Item>
    //     ))}
    //   </List>
    //   {/* 注意⚠️：无限加载组件，放到列表后边 */}
    //   <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    // </div>

    <div className={styles.root}>
      {data.map((item) => (
        <div
          onClick={() => nav(`/article/${item.art_id}`)}
          key={item.art_id}
          className="article-item">
          <ArticleItem item={item} type={item.cover.type} />
        </div>
      ))}
      {/* 注意⚠️：无限加载组件，放到列表后边 */}
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  )
}

export default ArticleList
